<template>
 <!-- 晨会收入 - 日看板 -->
  <div class="board-content">
    <board-title title="收入" bgclass="bg-sr">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_sr.png" />
    </board-title>
    <van-loading v-if="isLoading" type="spinner" color="#1989fa" />
    <div class="board-sr-content" v-else>
      <div class="board-sr-info">
        <div class="board-sr-total total" @click="openPeopleDetail(info.KPI_CODE, info.KPI_VALUE, info.TOTAL_VALUE, info.HB)">
          <div class="item-total">
            <div class="value" style="color: #fff">{{ toTenThousand(info.KPI_VALUE || 0)}}</div>
            <div class="title">计费收入</div>
          </div>
          <div class="item-total-detail">
            <div class="item-detail">
              <span style="color: #fff">月累计</span>
              <span>{{ toTenThousand(info.TOTAL_VALUE || 0) }}</span>
            </div>
            <div class="item-detail">
              <span style="color: #fff">累计环比</span>
              <span v-if="info.HB >= 0" class="percent up">
                {{ info.HB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
              </span>
              <span v-else class="percent down">
                {{ info.HB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
              </span>
            </div>
          </div>
        </div>
        <div class="board-sr-total" v-for="item in other" :key="item.KPI_NAME" @click="openPeopleDetail(item.KPI_CODE, item.KPI_VALUE, item.TOTAL_VALUE, item.HB)">
          <div class="item-total">
            <div class="value">{{ toTenThousand(item.KPI_VALUE || 0)}}</div>
            <div class="title">{{ item.KPI_NAME }}</div>
          </div>
          <div class="item-total-detail">
            <div class="item-detail">
              <span>月累计</span>
              <span>{{ toTenThousand(item.TOTAL_VALUE || 0) }}</span>
            </div>
            <div class="item-detail">
              <span>累计环比</span>
              <span v-if="item.HB >= 0" class="percent up">
                {{ item.HB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
              </span>
              <span v-else class="percent down">
                {{ item.HB }}%
                <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import boardTitle from '@/views/components/publicline/board/title.vue'
import { morningDayIncomeTotal, morningDayIncomeOther } from '@/api/publicline/board.js'

export default {
  components: { boardTitle },
  data() {
    return {
      isLoading: true,
      info: {},
      other: [],
      queryParams: {}
    }
  },
  methods: {
    getMorningIncome(params) {
      this.getMorningDayIncomeTotal(params)
      this.getMorningDayIncomeOther(params)
    },
    // 晨会看板-日看板-收入总
    async getMorningDayIncomeTotal(params) {
      this.queryParams = params
      const res = await morningDayIncomeTotal(params)
      const { result, success } = res
      if (success) {
        this.info = result[0] || {}
      }
    },
    // 晨会看板-日看板-收入其他类型
    async getMorningDayIncomeOther(params) {
      this.isLoading = true
      this.queryParams = params
      const res = await morningDayIncomeOther(params)
      const { result, success } = res
      if (success) {
        this.other = result
        this.isLoading = false
      }
    },
    toTenThousand(value) {
      const num = Number(value)
      let size = 0
      if(num < 10000) {
        size = value + "元"
      } else {
        size = (value / 10000).toFixed(2) + "万元"
      }
      return size
    },
    openPeopleDetail(type, value = 0, mvalue = 0, hb = 0) {
      this.$open.call(this, '/publicline/board/income-list',
        {
          ...this.queryParams,
          type: type,
          value, mvalue, hb
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.board-sr-content {
  background: #fff;
  padding: 0 16px;
  .board-sr-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F3F7FA;
    &.total {
      background-image: url('~@/assets/imgs/publicline/board/bg-card-sr-total.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: #fff;
      .item-total-detail {
        margin-right: 10px;
      }
    }
    &:last-child {
      border-bottom: none;
    }
    .item-total {
      width: 45%;
      margin-left: 10px;
      display: inline-block;
      .value {
        font-size: 24px;
        color: #9987fb;
      }
      .unit {
        font-size: 14px;
      }
      .title {
        font-size: 12px;
      }
    }
    .item-total-detail {
      width: 55%;
      flex: 1;
      border-left: 1px solid #F5F5F5;
      .item-detail {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 5px;
        margin-left: 24px;
        &:last-child {
          margin-bottom: 0;
        }
        span {
          &:first-child {
            font-size: 12px;
            color: #999;
          }
        }
        .percent {
          padding-left: 8px;
        }
        .up {
          color: #FF6024;
        }
        .down {
          color: #40BB3F;
        }
        img {
          width: 11px;
        }
      }
    }
  }
}
</style>
